<template>
  <view class="like-container">
    <view v-if="listData.length > 0" class="like-list">
      <view 
        v-for="(item, index) in listData" 
        :key="index" 
        class="like-item"
      >
        <image 
          :src="item.img" 
          mode="aspectFill" 
          class="item-image"
        />
        <view class="item-content">
          <view class="item-header">
            <text class="item-title">{{ item.title }}</text>
            <text v-if="item.isDot" class="item-badge">{{ item.isDot }}</text>
          </view>
          <text class="item-desc">{{ item.introduce }}</text>
        </view>
      </view>
    </view>
    <view v-else class="empty-tip">
      暂无数据
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { likeList } from '../../api/api'
import { onLoad } from '@dcloudio/uni-app'

const listData = ref([])

onLoad(async () => {
  try {
    const res = await likeList()
    console.log('喜欢:', res)
    
    listData.value = Array.isArray(res) ? res :
                   res.data ? res.data :
                   res.list ? res.list : []
    
    if(listData.value.length === 0) {
      uni.showToast({
        title: '暂无数据',
        icon: 'none'
      })
    }
  } catch (err) {
    console.error('数据获取失败:', err)
    uni.showToast({
      title: '加载失败: ' + (err.message || '未知错误'),
      icon: 'none'
    })
  }
})
</script>

<style scoped lang="scss">
.like-container {
  padding: 20rpx;
  box-sizing: border-box;
  
  .like-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx; /* 项目间距 */
  }
  
  .like-item {
    width: calc(50% - 10rpx); /* 两列布局，减去一半的gap值 */
    background: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
    
    .item-image {
      width: 100%;
      height: 240rpx;
      display: block;
    }
    
    .item-content {
      padding: 20rpx;
      
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12rpx;
        
        .item-title {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .item-badge {
          background: #ff5a5f;
          color: white;
          font-size: 20rpx;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          margin-left: 10rpx;
        }
      }
      
      .item-desc {
        font-size: 24rpx;
        color: #666;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
      }
    }
  }
  
  .empty-tip {
    text-align: center;
    padding: 40rpx;
    color: #999;
    font-size: 28rpx;
  }
}
</style>